<template>
	<div class="table">
		<div class="container">
			<!-- header--筛选 -->
			<div class="handle-box">
				<div class="tap-wrap" style="text-align: right;margin-bottom: 20px;">
					<el-button type="success" @click="goAdd">新增</el-button>
				</div>
			</div>
			<el-table :data="tableData" border :stripe="true" style="width: 100%;" ref="multipleTable">
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="userName" label="用户名">
				</el-table-column>
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column label="操作" width="245" fixed="right">
					<template slot-scope="scope">
						<el-button type="primary" @click="goEdit(scope.row)">编辑</el-button>
						<el-button type="danger" @click="goDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination" v-if="tableData.length != 0">
				<el-pagination @current-change="getTableList" :page-size="pageSize" :current-page.sync="pageNum" layout="total,prev, pager, next,jumper,slot"
				 :page-count="pages" :total="total">
					<span class="goPize">前往</span>
				</el-pagination>
			</div>

			<!-- 新增弹窗 -->
			<el-dialog title="负责人" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false">
				<div style="color:red;padding:0 30px 15px;text-align: center;">*如果输入的手机号用户已在系统中，则会使用原手机号信息录入</div>
				<el-form :model="form" ref="form" :rules="rules" style="width:400px;margin: 0 auto;" label-width="100px">
					<!-- <el-form-item label="用户名" prop="userName" v-if="showDisabled == false">
						<el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
					</el-form-item> -->
					<el-form-item label="手机号" prop="phone" v-if="showDisabled == false">
						<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="gender">
						<el-select v-model="form.gender" placeholder="请选择性别">
							<el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出生日期" prop="birthday">
						<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="地址" prop="address">
						<el-input v-model="form.address" placeholder="请输入地址"></el-input>
					</el-form-item>
					<el-form-item label="头像" prop="avatar">
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
						 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="form.avatar" :src="form.avatar" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('form')">保存</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import md5 from 'js-md5'; //md5加密
	export default {
		name: 'userManager',
		data() {
			return {
				showDisabled: false,
				sexList: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				dialogFormVisible: false,
				form: {
					// userName: '',
					password: '',
					name: '',
					gender: '',
					phone: '',
					address: '',
					avatar: '',
					birthday: '',
					type: 1
				},
				rules: {
					// userName: [{
					// 	required: true,
					// 	message: '请输入用户名',
					// 	trigger: 'change'
					// }],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
				},
				tableData: [], //表数据
				pageSize: 0,
				pageNum: 1,
				pages: 0,
				total: 0,
			}
		},
		mounted() {
			this.getTableList();
		},
		// watch: {
		// 	// 监测 route 参数变化
		// 	'$route'(to, from) {
		// 		this.getTableList();
		// 	}
		// },
		methods: {
			//新增
			goAdd() {
				this.showDisabled = false;
				this.form = {
					// userName: '',
					password: '',
					name: '',
					gender: '',
					phone: '',
					address: '',
					avatar: '',
					birthday: '',
					type: 1
				};
				this.dialogFormVisible = true
			},
			//编辑
			goEdit(row) {
				let that = this;
				that.dialogFormVisible = true;
				that.showDisabled = true;
				if (row.gender == 1 || row.gender == '男') {
					row.gender = '男'
				} else if (row.gender == 2 || row.gender == '女') {
					row.gender = '女'
				} else {
					row.gender = ''
				}
				that.form = row;
				console.log(that.form)
			},
			//删除
			goDelete(row) {
				let that = this;
				that.$confirm('负责人是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.HttpUtil.delete(that, that.Global.URLPATH.ADDUSER + row.id, {},
						function(res) {
							if (res.status == 0) {
								that.$message.success('删除成功！')
								that.getTableList();
							}
						},
						function(res) {
							console.log(res.msg)
						})
				}).catch(() => {
					that.$message.success("已取消删除");
				});

			},
			//头像上传
			handleAvatarSuccess(res, file) {
				this.form.avatar = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//获取表数据
			getTableList(pageNum) {
				let that = this;
				pageNum = pageNum ? pageNum : that.pageNum;
				that.HttpUtil.get(that, that.Global.URLPATH.GETMANAGEUSER, {
					type: 1,
					pageNum: pageNum,
					size: 10
				}, function(res) {
					if (res.status == 0) {
						that.tableData = res.data.list;
						that.pages = res.data.pages;
						that.total = res.data.total;
						that.pageSize = res.data.pageSize;
						that.pageNum = res.data.pageNum;
					}
				}, function(res) {
					console.log(res.msg);
				})

			},

			//新增驻场用户列表
			submitForm(formName) {
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (that.form.id) {
							that.HttpUtil.put(that, that.Global.URLPATH.ADDUSER + that.form.id, {
								name: that.form.name,
								gender: that.form.gender,
								address: that.form.address,
								avatar: that.form.avatar,
								birthday: that.form.birthday
							}, function(res) {
								if (res.status == 0) {
									that.dialogFormVisible = false;
									that.$message.success('编辑成功！')
									that.getTableList();
								}
							}, function(res) {
								console.log(res.msg)
							})
						} else {
							//新增
							that.form.password = md5(that.form.password);
							that.form.userName = that.form.phone;
							that.HttpUtil.post(that, that.Global.URLPATH.ADDUSER, that.form,
								function(res) {
									if (res.status == 0) {
										that.dialogFormVisible = false;
										that.$message.success('新增成功！')
										that.getTableList();
									}
								},
								function(res) {
									console.log(res.msg)
								})
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
		}
	}
</script>

<style>
	@import url("../../../assets/css/common.css");

	.handle-box {
		margin-bottom: 20px;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader>.el-upload--text {
		width: 120px;
		height: 120px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
